<template>
  <div id="Swiper">
    <el-carousel trigger="click" arrow="never" height="330px">
      <el-carousel-item
        v-for="item in bannerData"
        :key="item.id"
        @click="handleGo(item)"
      >
        <!-- <div
          :style="{
            backgroundImage: `url(${item.image})`,
            width: '100%',
            height: '100%',
            backgroundSize: 'contain',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }"
        ></div> -->
        <div style="display: flex; justify-content: center">
          <img :src="item.image" alt="" />
        </div>
      </el-carousel-item>
    </el-carousel>
    <div
      class="main"
      style="position: absolute; top: 0; left: 50%; transform: translateX(-50%)"
    >
      <VolunteerFillIn />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
import VolunteerFillIn from '@/components/VolunteerFillIn';

const { bannerData } = defineProps({
  bannerData: {
    type: Object,
    default: () => {},
  },
});
const handleGo = (item) => {
  if (item.jump_url) {
    router.push(item.jump_url);
  } else {
    return;
  }
};
</script>

<style lang="scss" scoped>
#Swiper {
  position: relative;
  z-index: inherit;
  width: 100%;
}
</style>
